<template>
  <div class="pa-5 bg-white">
    <el-page-header @back="back">
      <template slot="title">
        <span class="back">返回</span>
      </template>
      <template slot="content">
        <span class="back pr-4">{{ current.name }}</span>
        <el-button type="primary" style="float: right" @click="showHistory = true">申请历史</el-button>
      </template>
    </el-page-header>
    <apply-form :detail="isDetail" :current="current" @back="back" />
    <el-dialog title="申请历史" :visible.sync="showHistory" width="70%">
      <ApplyHistory></ApplyHistory>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import { requestTargetDetail, getApproveDetail } from '@/api/chart/chart'
import ApplyForm from './components/apply-form.vue'
import ApplyHistory from './components/apply-history.vue'

export default {
  name: 'ChartView',
  components: { ApplyForm, ApplyHistory },
  data() {
    return {
      title: '',
      current: {},
      showHistory: false,
    }
  },
  computed: {
    ...mapGetters(['name']),
    isDetail() {
      return this.$route.path.indexOf('detail') > -1
    },
  },
  created() {
    this.init()
  },
  methods: {
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
    async init() {
      if (this.$route.params.id) {
        let id = this.$route.params.id

        if (this.isDetail) {
          const result = await getApproveDetail({ id })
          if (result.success) {
            let { approveUserName, deptName, reason, approveStatus, matrixId } = result.data
            this.current = { ...this.current, approveUserName, deptName, reason, approveStatus }
            id = matrixId
          } else {
            this.$message.error(result.message)
            return
          }
        }
        const res = await requestTargetDetail({ id })
        if (res.success) {
          this.current = {
            ...res.data,
            director: Number(res.data.director),
            position: Number(res.data.position),
            panelStyle: JSON.stringify(DEFAULT_COMMON_CANVAS_STYLE_STRING),
            reviser: this.name,
            createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          }
        } else {
          this.$message.error(res.message)
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.back {
  line-height: 32px;
}

::v-deep .el-page-header__left {
  flex-shrink: 0;
}

::v-deep .el-page-header__content {
  width: 100%;
}
</style>
